<template>
  <view class="x-subsidy" v-if="subsidyGoodsList.length > 0">
    <view class="_container">
      <view class="_title" @click="onList">
        <view class="_title-img">
          活动补贴，放心低价
        </view>
        <view class="_more">
          <text>查看更多</text>
          <x-icon name="icon-017" color="#323233" size="24"/>
        </view>
      </view>
      <scroll-view class="_scroll" scroll-x="true" scroll-left="0">
        <view class="_list">
          <view class="_item" v-for="(item,index) in subsidyGoodsList" :key="index" @click="onDetail(item)">
            <view class="_goods-img">
              <view v-if="item.subsidyAmount" class="_tips">补{{item.subsidyAmount}}</view>
              <x-image :src="item.productMainPic"/>
            </view>
            <view class="line-clamp-1 _goods-title">
              {{item.productTitle}}
            </view>
            <view class="_goods-price">
              <text class="flex1 _blod">¥{{item.subsidyPrice}}</text>
              <view class="buy">
                抢
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import $sr from '@/utils/x-sr';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'XSubsidyList',
  components: {
    XIcon,
    XImage
  },
  props: {},
  data() {
    return {
      currentIndex: 0,
      subsidyGoodsList: []
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getSubsidyGoodsList();
  },
  methods: {
    handleChange(e) {
      this.currentIndex = e.detail.current;
    },
    onList() {
      uni.navigateTo({
        url: '/packages/activity/subsidy/list'
      });
    },
    onDetail(item) {
      this.srTrack('trigger_sku_component', item);
      uni.navigateTo({
        url: `/pages/transit-product/index?productId=${item.productId}`
      });
    },
    // 获取首页补贴价商品数据
    getSubsidyGoodsList() {
      const params = {
        pageNum: 1,
        pageSize: 6,
        productSource: 3
      };
      this.$http({
        login: true,
        url: '/product/app/spu/list',
        data: params,
        report: false
      }).then(res => {
        this.subsidyGoodsList = res.data ? res.data : [];
        this.subsidyGoodsList.forEach(item => {
          this.srTrack('expose_sku_component', item);
        });
      }).catch((e) => {
        console.warn(e);
      });
    },
    // 有数上报
    srTrack(name, detail) {
      $sr.trackProductCard(name, detail);
    }
  }
};
</script>

<style lang="scss">
.x-subsidy{
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  ._container{
    min-height: 404px;
    border-radius: 12px;
    background: linear-gradient(180deg, #F9DDCF 0%, #FFFFFF 100%);
    ._title{
      display: flex;
      align-items: center;
      position: relative;
      height: 95px;
      box-sizing: border-box;
      padding: 20px 24px;
      ._title-img{
        font-size: 32px;
        font-weight: bold;
        //height: 55px;
      }
      ._more{
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        color: #323233;
        font-size: 28px;
      }
    }
    ._scroll{
      width: 100%;
      padding: 0 24px;
      ._list{
        display: flex;
        flex-wrap: nowrap;
        ._item{
          width: 190px;
          margin-right: 20px;
          ._goods-img{
            position: relative;
            width: 190px;
            height: 190px;
            border-radius: 6px 6px 0px 0px;;
            overflow: hidden;
            ._tips{
              position: absolute;
              top: 10px;
              left: 10px;
              padding: 2px 8px;
              background: linear-gradient(270deg, #FF2616 0%, #FF612F 100%);
              border-radius: 4px;
              font-size: 26px;
              color: #FFFFFF;
            }
          }
          ._goods-title{
            font-size: 28px;
            line-height: 1.4;
            color: #323233;
            margin-top: 12px;
          }
          ._goods-price{
            display: flex;
            font-size: 28px;
            color: #DE3A2E;
            margin-top: 12px;
            align-items: baseline;
            .buy{
              display: flex;
              align-items: center;
              justify-content: center;
              padding-left: 6px;
              width: 45px;
              height: 32px;
              background-image: cdn('/images/subsidy-buy.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              font-size: 24px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}
</style>
